<template>
	<view class="container">
		<Head title="登录" />
		<!-- <view class="head_box">
			<view style="margin-left: 24rpx;">
				<uni-icons type="left" size="24" @click="onBack"></uni-icons>
			</view>
			<view style="text-align: center;">登录</view>
			<view></view>
		</view> -->
		<view class="main">
			<view class="logo">
				<image src="../../static/login/logo.png"></image>
			</view>
			<view class="text">
				<image src="../../static/login/text_img.png"></image>
			</view>
			<view>
				<view class="input_box">
					<view class="prefix_box">
						<image src="../../static/user_icon.png" class="prefix_icon"></image>
						<view class="line"></view>
					</view>
					<input v-model="form.phone" placeholder="请输入手机号" type="number">
					<image src="../../static/close_icon.png" v-show="form.phone.length>0" class="close_icon" @click="onClose('phone')"></image>
				</view>
				<view class="input_box">
					<view class="prefix_box">
						<image src="../../static/lock_icon.png" class="prefix_icon"></image>
						<view class="line"></view>
					</view>
					<input v-model="form.vcode" style="width: 260rpx;" placeholder="请输入验证码" type="text">
					<image src="../../static/close_icon.png" v-show="form.vcode.length>0" class="close_icon right_close" @click="onClose('vcode')">
					</image>
					<text class="primary_color" @click="getCode">{{codeText}}</text>
				</view>
			</view>
			<view class="read_text">
				<view class="radio_box" @click="onRadio">
					<image v-if="isSelectRadio" class="selectd_radio_img" src="../../static/login/radio_icon.png">
					</image>
					<view v-else class="selectd_radio"></view>
				</view>
				<view>
					<text>已阅读并同意</text>
					<text class="primary_color">
						<text @click="onNav('/pages/aboutMy/index?title=用户协议&type=1')">《用户协议》</text>
						<text @click="onNav('/pages/aboutMy/index?title=用户隐私政策&type=2')">《用户隐私政策》</text>
					</text>
				</view>
			</view>
			<view>
				<view class="btn" @click="onSubmit">立即登录</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getSmsVcode,
		login
	} from '../../api/login';
	import {
		bindToken
	} from '../../utils/request';
	export default {
		components: {},
		onLoad(option) {},
		data() {
			return {
				isSelectRadio: false,
				sendVerifyState: false,
				codeText: '获取验证码',
				verifyCount: 60,
				form: {
					phone: '',
					vcode: ''
				}
			}
		},
		mounted() {
			// console.log(this.isLoginStatus(), ' this.isLoginStatus()')
		},
		methods: {
			async onSubmit() {
				const values = this.form;
				if (!values.phone) return uni.showToast({
					icon: 'none',
					title: '请输入手机号'
				});
				if (!(/^[1][3,4,5,6,7,8,9][0-9]{9}$/.test(values.phone))) return uni.showToast({
					icon: 'none',
					title: '请输入一个正确的手机号'
				});
				if (!values.vcode) return uni.showToast({
					icon: 'none',
					title: '请输入验证码'
				});
				if (!this.isSelectRadio) return uni.showToast({
					title: '请阅读并同意《用户协议》与《隐私协议》',
					icon: 'none'
				})
				const {
					data
				} = await login(values).catch(err=>{
					return uni.showToast({
						title: err,
						icon:"none"
					})
				});
				if(data){
					bindToken('set', {
						key: 'cyrappToken',
						data: {
							cyrappToken: data.cyrappToken
						}
					});
					uni.setStorageSync("userPhone",values.phone)
					uni.showToast({
						title: '登录成功',
					
					})
					setTimeout(() => {
						uni.reLaunch({
							url: '/pages/submitCarInfo/index'
						})
					}, 1300)
				}
				

			},
			async getCode() {
				const values = this.form;
				if (!values.phone) return uni.showToast({
					icon: 'none',
					title: '请输入手机号'
				});
				if (!(/^[1][3,4,5,7,8][0-9]{9}$/.test(values.phone))) return uni.showToast({
					icon: 'none',
					title: '请输入一个正确的手机号'
				});
				this.sendVerifyState = true;
				if (this.verifyCount === 60 && this.sendVerifyState) {
					let flag = setInterval(() => {
						this.verifyCount--;
						this.codeText = `${this.verifyCount}秒`;
						if (this.verifyCount === 1) {
							this.codeText = '获取验证码';
							this.sendVerifyState = false;
							this.verifyCount = 60;
							clearInterval(flag);
						}
					}, 1000);
					await getSmsVcode({
						phone: values.phone
					});
					uni.showToast({
						icon: 'none',
						title: '发送成功，请耐心等待短信'
					})
				} else {
					uni.showToast({
						title: '请耐心等待倒计时结束',
						icon: 'none'
					})
				}

			},
			onRadio() {
				this.isSelectRadio = !this.isSelectRadio;
			},
			onClose(field) {
				this.form[field] = '';
			},
			onBack() {
				uni.navigateBack({
					delta: 1
				})
			},
			onNav(url){
				uni.navigateTo({
					url
				})
			}
		}
	}
</script>
<style>
	page {
		background-color: #fff;
	}
</style>
<style lang="less" scoped>
	@import url('./index.less');
</style>